今天介紹的是一位僅18歲，年紀不大但藝驚四座的有為少年@DandyWeng ，是一個真正的 Homeschooler。愛好攝影、計算機和數碼產品，他的個人簡介上寫著：整個世界都是我的學校，學自己之所想所愛。自由的身心定能使我成為一個一直朝前行走的行者 : ）這是他的文章，分享關于自己創建第一個網站的過程：

少年的網站：dandyweng

我個人網站（www.dandyweng.com）的 2013 版上線已經兩個多月了，沒想到這個網站受到了不少人的喜愛和專業設計師的抬愛。上線第一天，單日訪問量超過了建站三年以來的總和。上線后，我一直都想寫一篇博文，簡述一下網站的建設過程。但因為種種原因，直到今天才有時間寫這篇博文。

上線以來，常常都有人通過 Email 或微博問我："你的網站是怎么做出來的？"，這樣的問題，還真不是三言兩語就能說清楚的，希望這篇博文能夠提供一些答案吧。

某一天的搜索引擎入口記錄里，還見到了這樣的關鍵詞

我有個習慣，做網站到每一個關鍵點時都會截圖留念，所以現在將所有圖片貼在一起就可以展示出一個比較連續的建設過程。

建設過程

基本構想

國內外很多網頁設計師都建議在開工之前先畫草稿（線框）圖，但我一般不用這種方法，只是在一個記事本里記下在腦海里一閃而過的想法。因為每次計劃做 一個網站的時候，我腦子里就已經浮現出了它大概的樣子，雖然很模糊，但我覺得它沒必要太清晰。很多創意的靈感都是在做的過程中發現的，所以只要腦子里有一 個大概的方向就可以開工了，具體的細節部份一邊做一邊想即可，沒必要一開始就把自己的思維給框住。根據大概的構想，我先整理出了一個大概的制作流程：

基本構想 → 設計規劃 → 框架構建 → 優化文字 → 細節粗調 → Retina 處理 → 響應式處理 → 動畫制作 → 細節微調 → 回遷上線 → 離線緩存和 Web App → 多語言版本

設計規劃

談到這個網站的設計，就必然要談到 Bootstrap。這是我首次使用 Bootstrap 框架制作網站。其實開始我一直在猶豫要不要用它，因為它預置了很多 CSS 樣式和框架，用起來太方便了，以致于我覺得會減少那種完全自己設計制作的成就感。后來由于開發時間有限，就采用了它，但主要只使用了它的框架系統，界面元 素部份以自己寫的為主。頁面由七個獨立模塊組成，按順序分別是：簡述、旅行、攝影、創造、Apple、聯系和關于，每個模塊都有它自己的特點。這種模塊化 的設計也方便做響應式處理。

框架構建

解析測試版域名，掛一個簡單的頁面測試

引入 Bootstrap，測試

研究了一下 Bootstrap 的文檔，做出了大概的框架，開始做地圖的部份

細節粗調

這一步把所有的元素都擺到位，實現各元素基本的功能。

逐步錄入地圖的坐標點數據

坐標點數據錄入完成，簡單做一下完善地圖的細節

給 header 換個背景看看

用簡單的文字先拼出各個模塊大概的樣子

當時的記事本草稿

Retina 處理

Retina 也就算高清視網膜屏幕的支持，作為一個"果粉"，這點當然不能放過。技術方面，我先試用了一些 jQuery Retina 插件，但普遍都有加載速度慢的問題。看來還是不能偷懶，只有自己寫。思路是用 JavaScript 檢測 devicePixelRatio，若是 Retina 屏幕就將值寫入 Cookie，然后刷新頁面，再用 PHP 讀取該 Cookie，輸出對應的圖片（高清或普通）。在 Retina 的 Macbook Pro 上測試還遇到了各種各樣的奇葩問題，逐個修復后最終效果確實不錯。后來發現 iPhone 等小屏幕 Retina 設備不需要使用針對 Retina Macbook / iPad 制作的大尺寸圖片，只要將普通尺寸的圖片縮小即可，所以再給 JS 增加了檢測 screenwidth，PHP 再做相應的調整，提高了小屏幕 Retina 設備的加載速度。

響應式處理

其實我在響應式設計開始流行之前，就已經在試著應用了，到現在可以說已經比較熟悉了，所以沒有遇到太多技術問題。

動畫制作

動畫的設計和制作花費了不少時間，既要有特色，又要夠酷炫，又不可浮夸，還要考慮性能和兼容性等等。本來還設計了一些動畫，但經過反復調試，發現容 易使在某些設備和瀏覽器崩潰，于是又移除掉了。但這個聯系方式的交互還是我比較喜歡的，在一個郵箱地址中隱藏了幾個不同的聯系信息，可以分別切換顯示。

細節微調

這里優化了不少細節，譬如字體、字色、陰影、紋理、滾動條等等，均是使用 CSS 3 來實現的，包括標題文字的漸變和倒影。最后 header 背景還是選了我在甘南的尕海拍的一幅作品。

有一些略為浮夸的設計也換掉了，比如下面這兩個就是被換掉的頭像彩色陰影和 Apple 模塊的角標

回遷上線

測試完成，從測試服務器遷回主服務器，解析域名。把網站發給身處各地、使用不同網絡的朋友們測試。

離線緩存和 Web App

說實話，這倆功能其實沒有什么實際的意義。這畢竟不是什么功能型網站，絕大多數訪客都只會訪問一次，而這兩個功能都是經常訪問時才能發揮作用。但是 考慮到這兩項技術我已經在別的網站已經應用過了，相對比較熟悉，搬到這上面來也用不了多少時間，所以順手就做了，讓大家體驗一下 HTML 5 離線緩存在一秒內加載完一個網頁是多爽的一件事。考慮到旅行模塊的地圖需要動態更新，所以沒有緩存它，而是用 AJAX 在頁面載入完成后再加載并渲染地圖。

多語言版本

一開始的計劃是要做多語言版本的，包括香港粵語繁體版、中國臺灣正體版和英文版，但到現在還沒有時間制作（其實也沒啥必要，嘿嘿）。

常見問題 FAQ

最近常常有人問我一些問題，我在這里按問題出現的頻率排序，一起回答一下吧。
如果你還有其他問題，也可以在此評論提出。不過如果是技術方面的問題，建議還是先在網上搜索一下吧，這樣可以找到更全面的答案。

網頁設計是怎么學的？

在這方面，我沒怎么讀過相關的書，只是先學習好基礎知識之后，參考一些優秀網站的代碼，遇到不懂問題的就上網搜索一下。我對感興趣的事物有著較大的 好奇心，而且因為我是一個 homeschooler，能有比較多的時間來學習這方面的知識。不過，我畢竟不是專業設計師或程序猿，只是愛好而已，并沒有系統地學習過這方面的知識， 在學習其他的知識和技能也占用了我不少時間，所以我的程序代碼（特別是 JS 和 PHP）寫得真是一般般，還需提高，見笑了，嘿嘿。

網站用了多長時間開發？

我的個人網站每年都會徹底地重新設計和制作一次。前幾年的更新一般是在過年前完成，但今年事情太多，拖至四月中旬才開工，直到五月中旬才上線。平均每天大概忙活一兩個小時，這期間還心血來潮做了一個智能手表 Pebble 的應用下載平臺"Pebbapps"，后來發現實際意義不大，浪費了不少時間。真正花在個人網站制作上的時間應該在 20 多小時。

網站是用什么軟件做的？

其實，理論上只要能進行文本編輯的軟件都可以用作網站開發。我以前是用 Windows / Mac 自帶的記事本，簡簡單單，沒有復雜的功能，沒有代碼提示器也養成了我寫代碼比較嚴謹的習慣。后來做的網站程序類的代碼多了，記事本就有點不太夠用了，就開 始用 Office FrontPage，至少代碼能上色和糾錯了。后來在 Mac 上用 Dreamweaver 習慣之后，在 PC 上也開始用了，但也很少用那些高級功能，最喜歡它的一點就是可以把編輯器調成黑色背景，保護視力。

網站的加載速度怎么這么慢？

這有兩個原因：
其一，網站本身的前端性能確實不夠好，也是網站采用大量圖片和動畫的代價之一。我曾在加載速度和展示效果間做過權衡，后來考慮到這畢竟不是功能型網站，大 多數訪客只會訪問一次，所以還是將效果放在第一位。后來我也發現一些可以提高加載速度的改進方法，但現在暫時還沒有時間實現；
其二，因為我還是未成年無法備案，無法將服務器放在國內，所以只能放在國外，并且它只有一個節點，所以我所有網站的訪問速度都普遍較慢。
補充：9 月 8 日做了一個小更新，啟用鏡像 CDN 加速，優化了前端性能，加載速度現在基本上已經沒有什么問題了。

網站能開源嗎？

由于這個網站沒有多少需要動態更新的內容，主要是以前端為主，沒有多么復雜的后臺，數據庫也只是用于統計訪問數據而已，所以用瀏覽器的開發者工具就能幾乎看到全部有用的代碼。
這個網站的代碼可供學習或參考，但最好不要直接整個復制喔，那樣學不到什么東西。并且希望你能注明來源、不要外鏈圖片。

網站的地圖里為什么沒有中國臺灣？

曾經主頁上的地圖里沒有中國臺灣，后來考慮到這個原本用地圖為背景的模塊、僅用于標示我旅行足跡的"地圖"會刺激一部分愛國人士的神經，還是把寶島臺灣加上去了。

你真的才 17 歲？

慚愧慚愧，我也希望能再大一點。但這個還是假不了的，我又不是天一，嘿嘿嘿。

原文地址：dandyweng
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：